<template>
  <div class="container">
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane label="其他资源">
        <div class="border_head">
          <!--        <el-button class="addbtn" type="primary" @click="addDialogVisible = true">-->
          <!--          添加资源-->
          <!--        </el-button>-->
          <div class="search_input">
            <el-input v-model="searchInput" placeholder="请输入资源名"></el-input>
            <el-button class="searchbtn" type="primary" @click="search">
              搜索
            </el-button>
            <el-button slot="reference" type="primary"
                       style="float: left;position: relative;left: 10px; width: 200px;margin-bottom: 20px"
                       @click="addNewOthorVisiable = true">上传非视频资源
            </el-button>
          </div>

        </div>
        <el-table
            :data="otherResList"
            border
            style="">
          <el-table-column
              fixed
              prop="resourceName"
              label="资源名"
              height="10"
              width="200">
          </el-table-column>
          <el-table-column label="发布时间"
                           width="245">
            <template slot-scope="scope">
              {{ dateFormat(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="更新时间"
                           width="245">
            <template slot-scope="scope">
              {{ dateFormat(scope.row.updateTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="success"
                  @click="detail(scope.row)">查看详情
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  v-if="user.role != 2"
                  @click="remove(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="margin-top: 20px;float: right"
                       background
                       layout="prev, pager, next"
                       :page-size="pageSize"
                       :total="total"
                       @current-change="page">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="视频资源">
        <div class="border_head">
          <div class="search_input">
            <el-input v-model="searchInput" placeholder="请输入资源名"></el-input>
            <el-button class="searchbtn" type="primary" @click="search">
              搜索
            </el-button>
            <el-button slot="reference" type="primary"
                       style="float: left;position: relative;left: 10px; width: 200px;margin-bottom: 20px"
                       @click="addNewVedioVisiable = true">上传视频资源
            </el-button>
          </div>
        </div>
        <el-table
            :data="vedioResList"
            border
            style="">
          <el-table-column
              fixed
              prop="resourceName"
              label="资源名"
              height="10"
              width="200">
          </el-table-column>
          <el-table-column label="发布时间"
                           width="245">
            <template slot-scope="scope">
              {{ dateFormat(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="更新时间"
                           width="245">
            <template slot-scope="scope">
              {{ dateFormat(scope.row.updateTime) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="success"
                  @click="detail(scope.row)">查看详情
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  v-if="user.role != 2"
                  @click="remove(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination style="margin-top: 20px;float: right"
                       background
                       layout="prev, pager, next"
                       :page-size="pageSize"
                       :total="total"
                       @current-change="page">
        </el-pagination>
      </el-tab-pane>

    </el-tabs>
    <!-- 详情弹框 -->
    <el-dialog :title="detailDialogTitle" :visible="detailDialogVisible" @close="detailDialogVisible = false">
      <a :href="url" target="_blank">{{ resourceType == "0" ? '点击下载' : '点击跳转播放' }}</a>
    </el-dialog>
    <!--上传非视频资源-->
    <el-dialog title="上传非视频资源" :visible.sync="addNewOthorVisiable" onclose="addNewOthorVisiable = false">
      <el-form ref="form" label-width="80px">
        <el-form-item label="文件名">
          <el-input placeholder="包含格式 .pdf/.doc 等等" v-model="othorForm.form.resourceName"></el-input>
        </el-form-item>
        <el-upload class="upload-demo" :limit="1" :auto-upload="false"
                   :on-change="handleChange">
          <el-button slot="trigger" type="primary">选择文件</el-button>
          <el-button style="margin-left: 10px;" type="success" :disabled="!canUpload"
                     @click="handleUpload">上传文件
          </el-button>
          <div slot="tip" class="el-upload__tip">只能上传一个文件，且不超过10MB</div>
        </el-upload>
      </el-form>
    </el-dialog>
    <!--上传视频资源-->
    <el-dialog title="上传视频资源" :visible.sync="addNewVedioVisiable" onclose="addNewVedioVisiable = false">
      <el-form ref="form" label-width="80px">
        <el-form-item label="文件名">
          <el-input placeholder="包含格式 .mp3 等等" v-model="vedioForm.resourceName"></el-input>
        </el-form-item>
        <el-form-item label="视频路径">
          <el-input v-model="vedioForm.resourceUrl"></el-input>
        </el-form-item>
        <el-button style="margin-left: 10px;"
                   @click="addVedio">添加
        </el-button>
      </el-form>
    </el-dialog>


  </div>

</template>

<script>
export default {
  name: "ResourceList",
  data() {
    return {
      resourceType: "0",//默认视频资源 1视频资源 0非视频资源
      detailDialogVisible: false,
      addDialogVisible: false,
      //能否上传文件
      canUpload: false,
      //新增视频资源
      addNewVedioVisiable: false,
      //新增非视频资源
      addNewOthorVisiable: false,
      //视频资源表单
      vedioForm: {
        dirId: -1,
        resourceName: '',
        resourceUrl: '',
        userId: JSON.parse(window.localStorage.getItem('user')).userId
      },
      //视频资源表单
      othorForm: {
        file: null,
        form: {
          dirId: -1,
          resourceName: '',
          resourceUrl: '',
          userId: JSON.parse(window.localStorage.getItem('user')).userId
        }
      },
      //视频资源数据
      vedioResList: [],
      //非视频资源数据
      otherResList: [],
      pageSize: 5,
      total: null,
      searchInput: '',
      user: JSON.parse(localStorage.getItem("user")),
      url: '',
      detailDialogTitle: ''
    }
  },
  methods: {
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
    handleClick(tab, event) {
      this.resourceType = tab.index;
      console.log(this.resourceType);
    },
    page(currentPage) {
      const _this = this;
      if (_this.form.resourceType === 0) {
        axios.get("http://localhost:8080/resourceInfo/findByType/0/" + currentPage + _this.pageSize).then(function (resp) {
          _this.otherResList = resp.data.data.content;
          _this.pageSize = resp.data.data.size
          _this.total = resp.data.data.total
          console.log(resp.data.data.content)
        })
      } else if (_this.form.resourceType === 1) {
        axios.get("http://localhost:8080/resourceInfo/findByType/1/" + currentPage + _this.pageSize).then(function (resp) {
          _this.otherResList = resp.data.data.content;
          _this.pageSize = resp.data.data.size
          _this.total = resp.data.data.total
          console.log(resp.data.data.content)
        })
      }
    },
    detail(row) {
      this.detailDialogVisible = true
      this.detailDialogTitle = row.resourceName;
      this.url = row.resourceUrl;
    },
    search() {
      const _this = this;
      console.log(typeof _this.searchInput)
      console.log(_this.searchInput.length)

      //如果为空重新查询
      if (_this.searchInput == '' || _this.searchInput == null || _this.searchInput.length == 0) {
        location.reload()
        return
      }
      // searchInput
      if (_this.resourceType == '0') {
        axios.get("http://localhost:8080/resourceInfo/findByName/0/" + _this.searchInput + "/1/100").then(function (resp) {
          _this.otherResList = resp.data.data.content;
          _this.pageSize = resp.data.data.size
          _this.total = resp.data.data.total
          console.log(resp.data.data.content)
        })
      } else if (_this.resourceType == '1') {
        axios.get("http://localhost:8080/resourceInfo/findByName/1/" + _this.searchInput + "/1/100").then(function (resp) {
          _this.vedioResList = resp.data.data.content;
          _this.pageSize = resp.data.data.size
          _this.total = resp.data.data.total
          console.log(resp.data.data.content)
        })
      }
    },
    remove(row) {
      const _this = this
      this.$confirm('确认删除资源【' + row.resourceName + '】吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete('http://localhost:8080/resourceInfo/deleteById/' + row.resourceId).then(function (resp) {
          if (resp.data.code == -1) {
            _this.$alert('通知【' + row.resourceName + '】删除失败', '错误', {
              confirmButtonText: '确定'
            });
          }
          if (resp.data.code == 0) {
            _this.$alert('通知【' + row.resourceName + '】删除成功', '成功', {
              confirmButtonText: '确定',
              callback: action => {
                location.reload()
              }
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //上传视频资源
    addVedio() {
      const _this = this;
      axios.post(
          "http://localhost:8080/resourceInfo/addVedio"
          , _this.vedioForm
      ).then(function (response) {
        console.log(response);
        if (response.data.code == 0) {
          _this.$alert('资源添加成功', '成功', {
            confirmButtonText: '确定',
            callback: action => {
              location.reload()
            }
          });
        } else {
          _this.$alert('添加失败，请稍后在试', '失败', {
            confirmButtonText: '确定',
            callback: action => {
              location.reload()
            }
          });
        }
      }).catch(function (error) {
      });
    },
    //文件处理,上传非视频资源
    handleChange(file) {
      this.othorForm.file = file.raw;
      this.canUpload = true;
    },
    handleUpload() {
      var _this = this;
      var form = new FormData()
      console.log(_this.othorForm)
      console.log(_this.othorForm.form.resourceName)
      form.append('file', _this.othorForm.file);
      form.append('dirId', _this.othorForm.form.dirId);
      form.append('resourceName', _this.othorForm.form.resourceName);
      form.append('resourceUrl', _this.othorForm.form.resourceUrl);
      form.append('userId', _this.othorForm.form.userId);
      console.log(form)
      axios.post(
          "http://localhost:8080/resourceInfo/addFile"
          , form
      ).then(function (response) {
        console.log(response);
        if (response.data.code == 0) {
          _this.$alert('资源添加成功', '成功', {
            confirmButtonText: '确定',
            callback: action => {
              location.reload()
            }
          });
        } else {
          _this.$alert('添加失败，请稍后在试', '失败', {
            confirmButtonText: '确定',
            callback: action => {
              location.reload()
            }
          });
        }
      }).catch(function (error) {
      });
    },
  }
  ,
  created() {
    const _this = this;
    axios.get("http://localhost:8080/resourceInfo/findByType/0/1/" + _this.pageSize).then(function (resp) {
      _this.otherResList = resp.data.data.content;
      _this.pageSize = resp.data.data.size
      _this.total = resp.data.data.total
      console.log(resp.data.data.content)
    })
    axios.get("http://localhost:8080/resourceInfo/findByType/1/1/" + _this.pageSize).then(function (resp) {
      _this.vedioResList = resp.data.data.content;
      _this.pageSize = resp.data.data.size
      _this.total = resp.data.data.total
      console.log(resp.data.data.content)
    })
  }
}
</script>

<style scoped>
.container {
  width: 60%;
  margin: 50px auto;
  color: black;
}

.border_head {
  display: flex;
  justify-content: space-between;
}

.searchbtn {
  margin: 0px;
  margin-left: 5px;
  height: 40px;
}

.search_input {
  display: flex;
  justify-content: right;
  margin: 10px;
}
</style>
